<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
	<script type="text/javascript">
		$(document).ready(function() {
			var url = window.location.pathname;
			var page = $(this);
			$(".nav .startseite a").css("opacity", "0.4");
			$(".nav .bilder a").css("opacity", "0.4");
			$(".nav .kontakt a").css("opacity", "0.4");
			switch (url) {
			case "/":
				page = $(".nav .startseite a");
				page.css("opacity", "1");
				break;
			case "/startseite":
				page = $(".nav .startseite a");
				page.css("opacity", "1");
				break;
			case "/kontakt":
				page = $(".nav .kontakt a");
				page.css("opacity", "1");
				break;
			default:
				if (url.indexOf("/alben") !== -1) {
					page = $(".nav .bilder a");
					page.css("opacity", "1");
				}
				break;
			}

			$(".nav li a").hover(function() {
				$(this).stop();
				$(this).animate({
					opacity : 1
				}, 100);
			}, function() {
				if ($(this).attr("href") != page.attr("href") || page == null) {
					$(this).stop();
					$(this).animate({
						opacity : 0.4
					}, 400);
				}
			});
		});
	</script>

	<div class="header"
		style="background-image: url('resources/img/header.png');">

		<ul class="nav">
			<li class="startseite"><h:outputLink
					value="#{request.contextPath}/startseite">Startseite</h:outputLink></li>
			<li class="bilder"><h:outputLink
					value="#{request.contextPath}/alben">Bilder</h:outputLink></li>
			<li class="kontakt"><h:outputLink
					value="#{request.contextPath}/kontakt">Kontakt</h:outputLink></li>
		</ul>
	</div>

	<h:outputLink value="#{request.contextPath}/startseite">
	</h:outputLink>
</ui:composition>
